<template>
  <view class="taskContent">
    <nut-searchbar v-model="searchValue" @search="handleSearch"></nut-searchbar>
    <nut-backtop @click="backToTop" :distance="100" :right="20">
      <template v-slot:content>
        <!-- 代办任务列表 -->
        <view class="taskList">
          <nut-cell
            v-for="Item in taskList"
            :key="Item.caseId"
            :title="Item.caseType"
            :desc="Item.caseTime"
            round-radius="10"
            is-link
            @click="handleClick(Item)"
          >
          </nut-cell>
        </view>
      </template>
    </nut-backtop>
    <nut-action-sheet v-model:visible="state.isVisible" cancel-txt="取消">
      <view class="actionItem">
        <nut-button type="success" style="margin: 5px 10px" @click="handleStart"
          >开始任务</nut-button
        >
        <!-- <nut-button type="warning" style="margin: 5px 10px"
          >上传附件</nut-button
        > -->
        <nut-button type="danger" style="margin: 5px 10px" @click="handleEnd"
          >结束任务</nut-button
        >
      </view>
    </nut-action-sheet>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import {} from "vue";
import needLoginHook from "@/utils/needLoginHook";
import httpService from "../../service/httpService";
// 登录判断
needLoginHook();
const state = reactive({
  isVisible: false,
  val: "",
});
const taskList = ref<any[]>([]);
const ItemSelected = ref<any>();
const searchValue = ref(undefined);

const fetchData = async () => {
  const res = await httpService.post(
    "/api/case/searchProjectCaseList",
    {
      data: {},
    },
    {
      roleCode: 1,
      userCode: 50,
      fromModule: "Task",
      ip: "192.168.4.16",
    }
  );
  res.result.forEach((element) => {
    taskList.value?.push({
      caseId: element.caseID,
      caseType: element.unitName,
      caseTime: element.CaseCode,
    });
  });
};
fetchData();
function backToTop() {
  console.log("返回顶部");
}
function handleSearch() {
  console.log("触发搜索");
}
function handleClick(Item) {
  console.log("选中数据", Item);
  ItemSelected.value = Item;
  switchActionSheet();
}
/**
 * 开始任务
 */
function handleStart() {
  console.log("开始该任务", ItemSelected.value);
  switchActionSheet();
}
/**
 * 结束任务
 */
function handleEnd() {
  console.log("结束该任务", ItemSelected.value);
  switchActionSheet();
}
/**
 * 激活动作面板
 */
function switchActionSheet() {
  state.isVisible = !state.isVisible;
}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.taskContent {
  background-image: radial-gradient(at top right, #84b2e8 30%, #f3f7ff);
}
.taskList {
  margin: 0px 30px;
}
.actionItem {
  display: flex;
  flex-direction: column;
}
</style>
